﻿
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .clearfix:after{
        display: table;
        content: "";
        clear: both;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    body{
        font-size:12px; 
        font-family: Verdana, "宋体";
	    
    }
    .box{
        width:960px;
        margin:0 auto;
    }
    .li1 li{
        list-style: none;
        float: left;
        margin:10px;      
    }
    .li1{
        height: 32px;
        background: #eafffa;
        margin-top:20px;
        border:1px solid rgb(230, 229, 229);
        border-bottom: none;
        position: relative;
    }
    .pic5{
       position: absolute;
       left:10px;
       top:-10px; 
    }
    .li2 li{
        list-style: none;
        float: left;
        margin:16px;  
        color:white; 
        line-height: 6px; 
    }
    .li2{
        height:36px;
        background: url(image/menuBg.jpg);
        margin-top: 4px;
        margin-bottom: 8px;
    }
    .li1 a{
        text-decoration: none;
        color:#5ea593;
    }
    .li2 a{
        text-decoration: none;
        color:white;
       
    }
    .cnt{
        margin-top: 18px;
        padding-top: 100px;
        box-sizing: border-box;
        height: 380px;
        border: 1.6px solid #cce9ac;
        position: relative;
    }
    .txt1{
        width:270px;
        margin-top:20px;
    }
    .txt1>*{
        margin-bottom: 6px;
    }
    .txt1 p{
        height: 22px;
        line-height: 22px;
    }
    .txt2{
        width:280px;
    }
    .txt2>*{
        margin:6px;
    }
    .txt3>*{
        margin:6px;
    }
    .txt2 a{
        height: 20px;
        line-height: 20px;
    }
    .cnt4{
        margin-left: 24px;
    }
    .cnt2{
        margin-bottom: 10px;
    }
    .cnt a{
        font-size: 15px;
        text-decoration: none;
    }
    a:hover{
        text-decoration: underline;
    }
    .pic1{
        position: absolute;
        top:16px;
        left:-12px;
    }
    .pic2{
        position: absolute;
        top:96px;
        left:20px;
    }
    .pic3{
        position: absolute;
        top:96px;
        left:552px;
    }
    .pic4{
        position: absolute;
        top:214px;
        left:552px;
    }
    .price{
        color:#8e112b;
        margin-right:14px; 
        font-weight: bold;
    }
    .dz{
        color:#5ea593;
        font-weight: bold;
    }
    .bot{
        color:rgb(109, 108, 108);
        text-align: center;
    }
    .bot img{
        vertical-align: middle;
    }
</style>

<div class="box">

    <div class="clearfix">
        <div class="fl"><img src="image/logo.jpg"/></div>
        <div class="fr li1">
            <div class="pic5"><img src="image/icon_count.png"/></div>
            <ul>
                <li><a href="#">尾品汇</a></li>
                <li><a href="#">当当优品</a></li>
                <li><a href="#">数字馆</a></li>
                <li><a href="#">都看阅器</a></li>
            </ul> 
        </div>
       
    </div>

    <ul class="li2 clearfix">
        <li><a href="#">首页</a></li>
        <li><a href="#">图书</a></li>
        <li><a href="#">音像</a></li>
        <li><a href="#">童装</a></li>
        <li><a href="#">服装</a></li>
        <li><a href="#">鞋靴</a></li>
        <li><a href="#">运动</a></li>
        <li><a href="#">箱包</a></li>
        <li><a href="#">美妆</a></li>
        <li><a href="#">珠宝</a></li>
        <li><a href="#">家居</a></li>
        <li><a href="#">食品</a></li>
        <li><a href="#">酒</a></li>
        <li><a href="#">手机</a></li>
        <li><a href="#">数码</a></li>
        <li><a href="#">电脑</a></li>
        <li><a href="#">家电</a></li>
    </ul>

    <img src="image/banner.png"/>

    <div class="cnt">
        <div class="pic1"><img src="image/bg_bang.gif"/></div>
        <div class="pic2"><img src="image/bookNo1.gif"/></div>
        <div class="pic3"><img src="image/bookNo2.gif"/></div>
        <div class="pic4"><img src="image/bookNo3.gif"/></div>
        <div class="cnt1 fl">
            <div class="fl"><img src="image/book-01.jpg"/></div>
            <div class="fl txt1">
                <div><a href="#">偷影子的人</a></div>
                <div>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</div>
                <div>出版社：湖南文艺出版社</div>
                <div>当当价：<span class="price">￥ 17.90</span></div>
                <p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。 一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</p>
            </div>
        </div>
        
        <div class="cnt4 fl">
            <div class="cnt2 clearfix">
                <div class="fl"><img src="image/book-02.jpg"/></div>
                <div class="fl txt2">
                    <div><a href="#">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a></div>
                    <div>作 者：柴静 著</div>
                    <div>出版社：广西师范大学出版社</div>
                    <div><span class="price">￥ 29.40</span> <span class="dz">7.4折</span> </div>
                </div>
            </div>
            
            <div class="cnt3 clearfix">
                <div class="fl"><img src="image/book-03.jpg"/></div>
                <div class="fl txt3">
                    <div><a href="#">改变孩子先改变自己</a></div>
                    <div>作 者：柴静 著</div>
                    <div>出版社：广西师范大学出版社</div>
                    <div><span class="price">￥ 29.40</span> <span class="dz">7.4折</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bot">
        <p>Copyright (C) 当当网 2004-2017, All Rights Reserved<img src="image/validate.gif"/>京ICP证041189号出版物经营许可证 新出发京批字第直0673号</p>
        <div class="pic6"></div>
    </div>
</div>